<template>
  <MainLayout :title="'系统配置'">
    <template #main>
      <div class="main_block" v-loading="loading">
        <el-form
          class="form_block"
          ref="form_ref"
          :model="form_params"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="系统名称：" prop="companyName">
            <el-input v-model="form_params.companyName" />
          </el-form-item>
          <el-form-item label="系统LOGO：" prop="age">
            <!-- 上传图片的组件 -->
            <Uploader
              :file-list="initFileList"
              @success="handleUploadSuccess"
              @remove="handleUploadRemove"
            ></Uploader>
            <div class="tips">最多可上传一张，建议图片尺寸：24*24 、 32*32</div>
          </el-form-item>
        </el-form>
        <div class="form_buttom_block">
          <el-button
            :loading="button_loading"
            type="primary"
            @click="submitForm()"
            >保存</el-button
          >
        </div>
      </div>
    </template>
  </MainLayout>
</template>

<script setup >
import { reactive } from "vue";
import { AdminCompanyInfo,AdminCompanyEdit } from "@/api/settings";
import { ImageUrlWithToken } from "@/utils";
import { ElMessage } from "element-plus";
import config from "@/config";
import { useRouter } from "vue-router";

const router = useRouter()
const loading = ref(true);
const button_loading = ref(false);
const form_params = reactive({
  companyName: "",
  companyLogoUrl: "",
});
const rules = {
  companyName: [{ required: true, message: "请输入系统名称", trigger: "blur" }],
};
const form_ref = ref(null);
const initFileList = ref([]);

onMounted(() => {
  getSystemInfo();
});
const getSystemInfo = () => {
  loading.value = false;
  AdminCompanyInfo()
    .then((res) => {
      console.log("123456", res);
      console.log("1", ImageUrlWithToken(res.companyLogoUrl));

      form_params.companyName = res.companyName;
      // 整理组件需要的格式
      if (res.companyLogoUrl) {
        let obj = [
          {
            url: ImageUrlWithToken(res.companyLogoUrl),
          },
        ];
        initFileList.value = obj;
        form_params.companyLogoUrl = res.companyLogoUrl;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleUploadSuccess = (file, imgValue) => {
  initFileList.value = file;
  console.log("图片数据", imgValue);
  form_params.companyLogoUrl = imgValue.join(",");
};
// 删除 图片 的回调
const handleUploadRemove = (file, imgValue) => {
  const Index = initFileList.value.findIndex((item) => item.url === file.url);
  if (Index !== -1) {
    initFileList.value.splice(Index, 1);
  }
  console.log("图片数据", imgValue);
  form_params.companyLogoUrl = imgValue.join(",");
};

// 局部数据刷新
const refresh = inject("reload");

const submitForm = () => {
  form_ref.value.validate((valid) => {
    if (valid) {
      button_loading.value = true;
      AdminCompanyEdit(form_params)
        .then((res) => {
          ElMessage.success("配置信息修改成功");
          getSystemInfo();
          // 同步修改本地存储
          localStorage.setItem("configInfo", JSON.stringify(form_params));
          // 修改配置文件
          config.title = form_params.companyName;
          config.logo = ImageUrlWithToken(form_params.companyLogoUrl)
          // refresh()
          router.go(0)
        })
        .finally(() => {
          button_loading.value = false;
        });
    }
  });
};
</script>
<style scoped lang="scss">
.main_block {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.form_block {
  padding: 20px;
  max-width: 500px;
  height: 50%;
  min-height: 500px;
}
.form_buttom_block {
  padding-left: 40px;
}
.tips {
  color: #999;
}
</style>